import 'package:flutter/material.dart';

//需要的知识点:Flutter中的手势交互,主要是移动相关
//1.一条线是点的集合,绘板需要画n条线，所以是点的集合的集合 _lines
//2.组件为有状态组件,_lines为状态量,在移动时将点加入当前所画的线
//3.当抬起时说明一条线完毕，应该拷贝入_lines,并清空当前线作为下一条
//4.绘制单体类有颜色，大小，位置三个属性,类名TolyCircle

class TolyDrawable {
  Color color; //颜色
  Offset pos; //位置
  TolyDrawable(this.color, this.pos);
}

class TolyCicle extends TolyDrawable {
  double radius; //大小
  TolyCicle(Color color, Offset pos, {this.radius = 1.0}) : super(color, pos);
}

class Paper extends CustomPainter {
  Paper({required this.lines,}) {
    _paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;
  }

  late Paint _paint;
  final List<List<TolyCicle>> lines;

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < lines.length; i++) {
      drawLine(canvas, lines[i]);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  ///根据点位绘制线
  void drawLine(Canvas canvas, List<TolyCicle> positions) {
    for (int i = 0; i < positions.length - 1; i++) {
      if (positions[i] != null && positions[i + 1] != null)
        canvas.drawLine(positions[i].pos, positions[i + 1].pos,
            _paint..strokeWidth = positions[i].radius);
    }
  }
}
